<template>
    <div>
        <van-nav-bar
            @click-right="editingGoods"
        >
            <template #right>
                <van-button :type="buttonType" plain @click="changeButton">{{ editText }}</van-button>
            </template>
        </van-nav-bar>
        <van-checkbox-group v-model="result" v-for="(item,index) in cartList" :key="index" ref="checkboxGroup">
            <van-checkbox :name="item.id" @click="changeChecked(item)"/>
            <van-swipe-cell>
                <van-card :num="item.number" :price="item.retail_price" :title="item.goods_name"
                          :thumb="item.list_pic_url">
                    <template #num>
                        <van-stepper integer v-model="item.number" @change="updateCart(item)"/>
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button"
                                @click="handlecartDelete(item.product_id)"/>
                </template>
            </van-swipe-cell>
        </van-checkbox-group>

        <van-submit-bar v-show="isEditing === true" :disabled="this.cartList === 0" :price="this.checkGoodsAmount * 100"
                        button-text="提交订单"
                        @submit="onSubmit">
            <van-checkbox v-model="CheckedAll" :disabled="cartList.length === 0">全选</van-checkbox>
        </van-submit-bar>
        <van-submit-bar v-show="isEditing === false" :price="checkGoodsAmount * 100"
                        button-color="#fedc5e"
                        button-text="删除"
                        @submit="onDeleteGoods">
            <van-checkbox v-model="CheckedAll" :disabled="cartList.length === 0">全选</van-checkbox>
        </van-submit-bar>
        <Tips/>
    </div>
</template>

<script>
import Tips from "@/components/Tips";
import {getShopCarInfo, ChangeGoodsChecked, updateGoodsCar, deleteGoodsCar} from "@/api/home";

export default {
    name: "Cart",
    components: {Tips},
    data() {
        return {
            //哪一个商品为1 就可以把它的id添加到这个数组
            result: [],
            // 商品总列表
            cartList: "",
            //购物车数据
            cartTotal: 0,
            // 不同的操作按钮
            isEditing: true,
            // editText
            editText: "编辑",
            buttonType: "info",
            //全选按钮的布尔值
            CheckAll: false,
            //所有商品的初始值
            checkGoodsAmount: 0,
        }
    },
    mounted() {
        //清空数组
        this.cartList = [];
        getShopCarInfo().then(({data}) => {
            this.totalFn(data);
        })
    },
    methods: {
        //选中商品和
        totalFn(data) {
            this.cartList = [];
            this.result = [];
            this.cartList = data.cartList;
            this.cartTotal = data.cartTotal;
            this.checkGoodsAmount = data.cartTotal.checkedGoodsAmount;
            this.cartList.forEach(item => {
                item.checked === 1 ? this.result.push(item.id) : "";
            });
        },
        async changeChecked(item) {
            let params = {
                isChecked: item.checked === 0 ? 1 : 0,
                productIds: item.product_id,
            };
            console.log(item);
            let res = await ChangeGoodsChecked(params);

            this.totalFn(res.data);
        },
        //删除商品
        async handlecartDelete(val) {
            console.log(val)
            let {data} = await deleteGoodsCar(val.toString());
            this.totalFn(data);
        },
        //更新选中商品数量
        async updateCart(val) {
            let params = {
                goodsId: val.goods_id,
                id: val.id,
                number: val.number,
                productId: val.product_id,
            };
            let {data} = await updateGoodsCar(params);
            this.totalFn(data);

        },
        editingGoods() {

        },
        onSubmit() {
        },
        //改变编辑状态
        changeButton() {
            this.isEditing = !this.isEditing;
            this.editText === "取消" ? this.editText = "编辑" : this.editText = "取消";
            this.buttonType === "info" ? this.buttonType = "warning" : this.buttonType = "info";
        },
        async onDeleteGoods(val) {
            let ids_arr = [];
            this.cartList.forEach(item => {
                if (item.checked === 1) {
                    ids_arr.push(item.product_id);
                }
            });
            let productIds = ids_arr.join(",");
            let {data} = await deleteGoodsCar(productIds);
            this.totalFn(data);
        },
    },
    computed: {
        CheckedAll: {
            get() {
                return this.result.length === this.cartList.length && this.cartList.length !== 0;
            },
            set(val) {
                let ids_arr = [];
                this.cartList.forEach(item => {
                    ids_arr.push(item.product_id);
                });
                ChangeGoodsChecked({
                    isChecked: val ? 1 : 0,
                    productIds: ids_arr.join(),
                }).then(res => {
                    this.totalFn(res.data);
                });
            },
        },
    }
}
</script>
<style scoped lang="less">
/deep/ .van-checkbox__label {
    flex: 1;
}

.van-submit-bar {
    bottom: 50px;
}

.van-checkbox-group {
    display: flex;

    .van-swipe-cell {
        flex: 1;
    }

    .van-checkbox {
        background-color: #fafafa;
        padding: 0 0 0 16px;
    }
}

.van-row--flex {
    background-color: #fff;
}

.van-swipe-cell__right {
    .van-button {
        height: 100%;
    }
}
</style>
